<template>
    <div class="page">
        <div ref="pdf" class="pdfpage">
            <p class="western" align="center"
                style="width:874px;margin-bottom: 0; line-height: 50px;text-align:center;font-size: 28px">
                外聘老师信息导出表格</p>
            <table width="874" cellpadding="7" cellspacing="0">
                <tr valign="top">
                    <td width="269" class="td-border">
                        <p class="western" align="left">姓名：{{ form.nickName }}</p>
                    </td>
                    <td rowspan="5" width="269" class="td-border">
                        <p class="western" align="left">照片： </p>
                        <p class="western" align="left">
                           <img style="height:200px;" referrerpolicy="no-referrer" :src="form.avatar" />
                        </p>
                    </td>
                </tr>
                <tr valign="top">
                    <td width="269" class="td-border">
                        <p class="western" align="left">性别：<dict-tag style="display:inline-block;"
                                :options="dict.type.sys_user_sex" :value="form.sex" /></p>
                    </td>
                </tr>
                <tr valign="top">
                    <td width="269" class="td-border">
                        <p class="western" align="left">联系电话：{{ form.phone }}</p>
                    </td>
                </tr>
                <tr valign="top">
                    <td width="269" class="td-border">
                        <p class="western" align="left">微信号：{{ form.wechatId }}</p>
                    </td>
                </tr>
                <tr valign="top">
                    <td width="269" class="td-border">
                        <p class="western" align="left">归属社团：{{ form.orgName }}</p>
                    </td>
                </tr>
                <tr valign="top">
                    <td width="269" class="td-border">
                        <p class="western" align="left">银行卡号：</p>
                        <p class="western" align="left">
                            {{ form.bankCard }}
                        </p>
                    </td>
                    <td width="269" class="td-border">
                        <p class="western" align="left">开户行（详细至支行）：
                        </p>
                        <p class="western" align="left">
                            {{ form.bank }}
                        </p>
                    </td>
                </tr>
                <tr valign="top">
                    <td width="269" class="td-border">
                        <p class="western" align="left">身份证号：{{ form.idCard }}</p>
                    </td>
                    <td width="269" class="td-border">
                        <p class="western" align="left">车牌号：{{ form.carNumber }}</p>
                    </td>
                </tr>
                <tr valign="top">
                    <td width="269" class="td-border">
                        <p class="western" align="left">身份证（正面） ：</p>
                        <p class="western" align="left">
                            <img style="height:160px;" referrerpolicy="no-referrer" :src="form.idCardFrontPhoto" />
                        </p>
                    </td>
                    <td width="269" class="td-border">
                        <p class="western" align="left">身份证（反面） ：</p>
                        <p class="western" align="left">
                            <img style="height:160px;" referrerpolicy="no-referrer" :src="form.idCardReversePhoto" />
                        </p>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" width="552" valign="top" class="td-border">
                        <p class="western" align="left">个人资质证明明细：</p>
                        <div class="western" style="display:flex;flex-wrap: wrap" align="left">
                            <div v-for="(item, index) in form.aptitudeList" :key="index" style="margin-right: 10px;">
                                <img style="width:275px;" referrerpolicy="no-referrer" :src="item.url" />
                                <div stype="padding:10px;">{{ item.remark }}</div>
                            </div>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" width="552" valign="top" class="td-border">
                        <p class="western" align="left">从业经历：</p>
                        <p class="western" align="left">
                            {{ form.experience }}
                        </p>
                    </td>
                </tr>
            </table>
            <p class="western" align="left" style="margin-bottom: 0; line-height: 100%">
                <br />

            </p>
            <!-- <div style="padding: 20px">
            <el-button type="primary" @click="handleExport">导出表格</el-button>
        </div> -->
        </div>
    </div>
</template>

<script>
import { getTeacher } from '@/api/system/forTeacher';
import router from '@/router';
import { downloadPDF } from "@/utils/pdf.js"
export default {
    name: 'Pdfvue',
    dicts: ['sys_user_sex'],
    data() {
        return {
            forTeacherId: null,
            form: {
            },
        };
    },
    created() {
        this.forTeacherId = router.history.current.params.forTeacherId;
        this.handleDetail();

    },
    mounted() {

    },

    methods: {
        // 导出pdf
        handleExport() {
            downloadPDF(this.$refs.pdf, "外聘老师" + this.form.nickName + "信息.pdf")
        },
        /** 修改按钮操作 */
        handleDetail() {
            getTeacher(this.forTeacherId).then(response => {
                console.log(response);
                this.form = response.data
                setTimeout(() => {
                    this.handleExport()
                    router.go(-1);
                }, 0);
            });
        },
    },
};
</script>

<style type="text/css">
.page{
    /* width: 827px 1169px; */
}
.pdfpage {
    /* size: 827px 1169px; */
    width: 1124px;
    /* height: 1169px; */
    /* margin: 100px 125px; */
    padding: 100px 125px;
}

.td-border {
    border: 1px solid #000000;
    padding: 0 8px;
}

p {
    margin-bottom: 10px;
    direction: ltr;
    line-height: 100%;
    text-align: justify;
    orphans: 0;
    widows: 0;
    background: transparent
}

p.western {
    orphans: 0;
    widows: 0;
    font-size: 20px;
}

p.cjk {
    font-size: 20px;
}

p.ctl {
    font-size: 24px;
}
</style>
   